<route lang="json5" type="page">
  {
    "name": "accountBook",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "default",
      "enablePullDownRefresh": true,
      "navigationBarBackgroundColor": "#F8F8F8",
      "navigationBarTitleText": "账本",
    }
  }
</route>

<script setup>
const dataList = ref([])
</script>

<template>
  <view class="main-page">
    <div class="grid grid-cols-2 mt-2 gap-5">
      <div
        v-for="i in dataList" :key="i.id" class="h-40 w-full rounded-l-5 rounded-r-10 bg-white py-5 shadow-lg"
      >
        <div class="mx-4 h-full flex flex-col justify-around">
          <div class="line-clamp-2 text-lg text-red font-bold">
            {{ i.title }}
          </div>
          <div class="text-sm text-gray">
            共 <span font-bold>{{ i.giftCount }}</span> 笔
          </div>
          <div class="mt-auto text-lg font-bold">
            <span class="text-sm">￥</span>{{ i.moneyTotal }}
          </div>
          <div class="mt-1 text-xs text-gray">
            <div>
              {{ i.date }}
            </div>
            <div>
              {{ i.lunarDate }}
            </div>
          </div>
        </div>
        <div class="relative">
          <div
            class="absolute bottom-18 right-0 h-7 w-18 flex items-center rounded-l-full bg-red"
          >
            <div class="ms-2 h-3 w-3 rounded-full bg-red-300" />
          </div>
        </div>
      </div>
      <div
        v-if="dataList.length === 0"
        class="h-40 w-full flex flex-col items-center justify-center rounded-l-5 rounded-r-10 bg-white py-5 shadow-lg"
      >
        <div class="i-hugeicons-plus-sign-circle text-3xl text-red font-bold" />
        <div class="mt-3">
          添加礼簿
        </div>
      </div>
    </div>
  </view>
</template>

<style scoped lang='scss'>
</style>
